<template>
  <!-- 规格选择 -->
  <div class="product-page">
      <h3>{{MilkTea.Name}}</h3>
      <el-image
        :src="image"
        class="product-image"
      ></el-image>

      <!-- 选择规格 -->
      <div class="option" v-for="(option, index) in MilkTea.GoodPropertyKey" :key="index">
        <span>{{option.Name}}：</span>
        
        <el-radio-group v-model="selectedOptions[index]">

          <el-radio  v-for="(value, indexs) in option.GoodPropertyValue" :key="indexs"
           :label="value" >
           {{value.Value}}
        </el-radio>

        </el-radio-group>
      </div>

      <!-- 操作按钮 -->
      <div class="actions">
        <el-button type="primary" @click="addToCart">加入购物车</el-button>
      </div>
  </div>
</template>

<script>
import bases from '../../plugins/base.js'
export default {
  data() {
    return {
      demo:'1',
      MilkTea: this.$store.state.MilkTea,
      image: bases.imgUrl + this.$store.state.MilkTea.Images,
      selectedOptions: [], // 已选择的规格
    };
  },
  props: ["data"],
  methods: {
    // 加入购物车
    addToCart() {
      console.log("选中的规格：",this.selectedOptions);
      console.log("商品：",this.MilkTea);

        // 组装数据
        const value={
          UserId:sessionStorage.getItem('UserId').toString(),
          Gid:this.MilkTea.GID,
          CreateDate:'',
          OrderStatus:'待制作',
          TotalAmount:this.MilkTea.Price,
          OrderNumber:1,
          Price:this.MilkTea.Price,
          Name:this.MilkTea.Name,
          Images:this.MilkTea.Images,
          Notes:'',
          OrdersSpec:[
          ]
        }

        // 组装规格数据
        this.selectedOptions.forEach(values => {
          value.OrdersSpec.push(
              {
              Did:'',
              Gpvid:values.GPVID
              }
          );
        });
      

        //添加到订单数组
      
     this.$emit("update:data", value); // 触发父组件更新数据
       this.$message.success("已加入购物车");

      console.log("订单数组：");
      console.log(value);

      //关闭弹窗
      this.$emit("Close");
    },

  },
  created() {
    // 初始化选中值
    let selectedOptions = [];
    console.log("初始化选中前：", this.selectedOptions);
    this.MilkTea.GoodPropertyKey.forEach((item) => {
           selectedOptions = [];
         item.GoodPropertyValue.forEach(value => {
              if(value.Is_Default){
                //添加规格值
                selectedOptions.push(value.Value); //复选框用的
                this.selectedOptions.push(value); //单选框用的
              }
         });
        
    });
    console.log('初始化选中值：', this.selectedOptions);
  },
  watch: {
    // 监听规格变化
    '$store.state.MilkTea': {
      handler(newVal, oldVal) {
        console.log('规格变化：', newVal, oldVal);
        // 更新选中值
        this.MilkTea=newVal;
        this.image=bases.imgUrl + newVal.Images;
        this.selectedOptions = []; // 已选择的规格
        this.MilkTea.GoodPropertyKey.forEach((item) => {
         item.GoodPropertyValue.forEach(value => {
              if(value.Is_Default){
                //添加规格值
                this.selectedOptions.push(value); //单选框用的
              }
         });
        
    });
        console.log('更新选中值：', this.selectedOptions);
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
.product-page {
   text-align: center;
}
.product-card {
  padding: 20px;
}
.product-image {
  width: 50%;
  height: 200px;
}
.option {
  margin-bottom: 15px;
}
.price {
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0;
}
.total-price {
  color: #f56c6c;
}
.actions {
  text-align: center;
}
</style>